<template>
  <view class="container">
	  <view class="container-title">
	  	请选择您的反馈类型
	  </view>
    <!-- 竖向菜单列表 -->
    <view class="menu-list">
      <view
        v-for="(item, index) in menuItems"
        :key="index"
        class="menu-item"
        @click="onMenuItemClick(item)"
      >
        <!-- 菜单文字 -->
        <text class="menu-text">{{ item.name }}</text>
        <!-- 右箭头图标 -->
        <image src="@/static/img/godtail.png" mode="widthFix" class="arrow-icon"></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 菜单项数据
      menuItems: [
        { id:0,name: '【建议】功能吐槽或建议', path: '/page_wallet/reportInfo' },
        { id:1,name: '【黄牛】举报入口 已处理283个牛', path: '/page_wallet/reportInfo' },
        {id:2, name: '【购票、订单】问题', path: '/page_wallet/reportInfo' },
        {id:3, name: '【换验票】问题', path: '/page_wallet/reportInfo' },
        { id:4,name: '【显示、内容】错误', path: '/page_wallet/reportInfo' },
        { id:5,name: '【其他】', path: '/page_wallet/reportInfo' },
      ]
    };
  },
  methods: {
    // 菜单项点击事件
    onMenuItemClick(item) {
      uni.navigateTo({
        url: item.path+'?id='+item.id // 跳转到对应页面
      });
    }
  }
};
</script>
<style>
page {
  height: 100%;
  background: #000000;
  color: white;
}
</style>
<style>
.container {
  height:100vh;
  background: #000000;
}
.container-title{
	font-size: 32rpx;
	height:90rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding:0 20rpx;
  color: rgba(255,255,255,1);
}
.menu-list {
}

.menu-item {
  box-sizing: border-box;
  padding:0 20rpx;
  background-color: rgba(255,255,255,.1);
	height:90rpx;
	margin-bottom: 10rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-text {
  font-size: 32rpx;
  color: rgba(255,255,255,1);
}

.arrow-icon {
  width: 18rpx;
  height: 18rpx;
}
</style>